import React, { Component } from 'react';


import { Tabs, Tag, DatePicker } from 'antd';
import echarts from 'echarts'

import "../../static/tero/index.less"
import $ from 'jquery'
import u from '../../common.js'

const TabPane = Tabs.TabPane;
const CheckableTag = Tag.CheckableTag;
const tagsFromServer = ['今日', '本周', '本月'];
const { RangePicker } = DatePicker;


class Index extends React.Component {
  constructor(props) {
    super(props)
  }
  state = {
    list: [],
    selectedTags: [],
  }
  handleChange(tag, checked) {
    const { selectedTags } = this.state;
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter(t => t !== tag);
    this.setState({ selectedTags: nextSelectedTags });
  }
  onChange(value, dateString) {
  }

  onOk(value) {
  }
  analysis = async () => {
    let mediaTrend = echarts.init(window.document.getElementById('trend'));
    window.onresize = function () {
      mediaTrend.resize();
    }
  }
  trend = async () => {
    let mediaTrend = echarts.init(window.document.getElementById('trend'));
    mediaTrend.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '0',
        right: '24%',
        top: '5%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#a1a5b5"
          },
          axisLine: {
            lineStyle: {
              color: "#a1a5b5"
            }
          },
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#a1a5b5"
          },
          axisLine: {
            show: false
          },
        }
      ],
      series: [
        {
          name: '数量',
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#566afe' },
                  { offset: 1, color: '#518bff' }
                ]
              )
            },
          },
          barWidth: '30px',
          barCategoryGap: '10px',
          data: [10, 52, 200, 334, 390, 330, 220, 10, 52, 200, 334, 390]
        }
      ]
    });
  };

  componentDidMount() {
    this.trend();
    this.analysis()
  }
  render() {
    return (
      <div className='index_father'>
        <div className='index-top'>
          <ul className="data-ul">
            <li>
              <img src={require('../../static/image/logo_all.png')}
                style={{ width: '26px', height: "26px", marginRight: "15%" }}
                alt="" />
              <div className="ul-right">
                <h3>124,543,23</h3>
                <span>今日数据总额</span>
              </div>
            </li>
            <li>
              <img src={require('../../static/image/icon_sentiment.png')}
                style={{ width: '26px', height: "26px", marginRight: "15%" }}
                alt="" />
              <div className="ul-right">
                <h3>124,543,23</h3>
                <span>今日数据总额</span>
              </div>
            </li>
            <li>
              <img src={require('../../static/image/icon_case.png')}
                style={{ width: '26px', height: "26px", marginRight: "15%" }}
                alt="" />
              <div className="ul-right">
                <h3>124,543,23</h3>
                <span>今日数据总额</span>
              </div>
            </li>
            <li>
              <img src={require('../../static/image/icon_intelligence.png')}
                style={{ width: '26px', height: "26px", marginRight: "15%" }}
                alt="" />
              <div className="ul-right">
                <h3>124,543,23</h3>
                <span>今日数据总额</span>
              </div>
            </li>
            <li>
              <img src={require('../../static/image/icon_intelligence.png')}
                style={{ width: '26px', height: "26px", marginRight: "15%" }}
                alt="" />
              <div className="ul-right">
                <h3>124,543,23</h3>
                <span>今日数据总额</span>
              </div>
            </li>
            <li>
              <img src={require('../../static/image/icon_intelligence.png')}
                style={{ width: '26px', height: "26px", marginRight: "15%" }}
                alt="" />
              <div className="ul-right">
                <h3>124,543,23</h3>
                <span>今日数据总额</span>
              </div>
            </li>
            <li>
              <img src={require('../../static/image/icon_intelligence.png')}
                style={{ width: '26px', height: "26px", marginRight: "15%" }}
                alt="" />
              <div className="ul-right">
                <h3>124,543,23</h3>
                <span>今日数据总额</span>
              </div>
            </li>
          </ul>
          <div className="analysis-content">
            <div className="a-trend">
              <div className="at-title">
                <div className="at-data">
                  <span>境内</span>
                  <span>境外</span>
                </div>
                <div className="at-select">
                  {tagsFromServer.map(tag => (
                    <CheckableTag
                      key={tag}
                      checked={this.state.selectedTags.indexOf(tag) > -1}
                      onChange={checked => this.handleChange(tag, checked)}
                    >
                      {tag}
                    </CheckableTag>
                  ))}
                </div>
                <div className="at-time">
                  <RangePicker
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm"
                    placeholder={['Start Time', 'End Time']}
                    onChange={this.onChange}
                    onOk={this.onOk}
                  />
                </div>
              </div>
              <div id="trend">

              </div>
              <div className='bbx'>
                <h3>预警通知</h3>
                <ul>
                  <li className='red'><span>1</span><span>英国外交大臣说应努力消除网络传播极端主义信息</span></li>
                  <li className='blue'><span>1</span><span>英国外交大臣说应努力消除网络传播极端主义信息</span></li>
                  <li className='blue'><span>1</span><span>英国外交大臣说应努力消除网络传播极端主义信息</span></li>
                  <li><span>1</span><span>英国外交大臣说应努力消除网络传播极端主义信息</span></li>
                  <li><span>1</span><span>英国外交大臣说应努力消除网络传播极端主义信息</span></li>
                  <li><span>1</span><span>英国外交大臣说应努力消除网络传播极端主义信息</span></li>
                </ul>
              </div>
            </div>
          </div>
          <div></div>
        </div>
        <div className='conter'>
          <div className='conter_bottom'>
            <div className='conter_bottom_son'>
              <div className='top_one'>
                <span>今日舆情</span><span><img src={require('../../static/image/gd.png')} alt="" /></span>
              </div>
              <ul>
                <li><div><h3>习近平主持政治局会议 研究当前经济形势前经济形势前经济形势</h3>
                  <p>中共中央政治局4月25日召开会议，分析研究今日舆情今日舆情今日舆情今日舆情今日舆情势和经...</p></div>
                  <div className='right_div'>2018-02-21  08:50:08</div></li>
                <li><div><h3>习近平主持政治局会议 研究当前经济形势前经济形势前经济形势</h3>
                  <p>中共中央政治局4月25日召开会议，分析研究今日舆情今日舆情今日舆情今日舆情今日舆情势和经...</p></div>
                  <div>2018-02-21  08:50:08</div></li>
                <li><div><h3>习近平主持政治局会议 研究当前经济形势前经济形势前经济形势</h3>
                  <p>中共中央政治局4月25日召开会议，分析研究今日舆情今日舆情今日舆情今日舆情今日舆情势和经...</p></div>
                  <div>2018-02-21  08:50:08</div></li>
                <li><div><h3>习近平主持政治局会议 研究当前经济形势前经济形势前经济形势</h3>
                  <p>中共中央政治局4月25日召开会议，分析研究今日舆情今日舆情今日舆情今日舆情今日舆情势和经...</p></div>
                  <div>2018-02-21  08:50:08</div></li>
                <li><div><h3>习近平主持政治局会议 研究当前经济形势前经济形势前经济形势</h3>
                  <p>中共中央政治局4月25日召开会议，分析研究今日舆情今日舆情今日舆情今日舆情今日舆情势和经...</p></div>
                  <div>2018-02-21  08:50:08</div></li>
              </ul>
            </div>
            <div className='conter_bottom_son'>
              <div className='top_one'>
                <span>今日舆情</span><span><img src={require('../../static/image/gd.png')} alt="" /></span>
              </div>
              <ul>
                <li><div><h3>习近平主持政治局会议 研究当前经济形势前经济形势前经济形势</h3>
                  <p>中共中央政治局4月25日召开会议，分析研究今日舆情今日舆情今日舆情今日舆情今日舆情势和经...</p></div>
                  <div className='right_div'>2018-02-21  08:50:08</div></li>
                <li><div><h3>习近平主持政治局会议 研究当前经济形势前经济形势前经济形势</h3>
                  <p>中共中央政治局4月25日召开会议，分析研究今日舆情今日舆情今日舆情今日舆情今日舆情势和经...</p></div>
                  <div>2018-02-21  08:50:08</div></li>
                <li><div><h3>习近平主持政治局会议 研究当前经济形势前经济形势前经济形势</h3>
                  <p>中共中央政治局4月25日召开会议，分析研究今日舆情今日舆情今日舆情今日舆情今日舆情势和经...</p></div>
                  <div>2018-02-21  08:50:08</div></li>
                <li><div><h3>习近平主持政治局会议 研究当前经济形势前经济形势前经济形势</h3>
                  <p>中共中央政治局4月25日召开会议，分析研究今日舆情今日舆情今日舆情今日舆情今日舆情势和经...</p></div>
                  <div>2018-02-21  08:50:08</div></li>
                <li><div><h3>习近平主持政治局会议 研究当前经济形势前经济形势前经济形势</h3>
                  <p>中共中央政治局4月25日召开会议，分析研究今日舆情今日舆情今日舆情今日舆情今日舆情势和经...</p></div>
                  <div>2018-02-21  08:50:08</div></li>
              </ul>
            </div>


          </div>
        </div>
      </div>
    )
  }
}

export default Index